<template>
  <carousel_part :allArr="allArr" @ss="ss" @message="message" @love="love" @share="share" @sculpture="sculpture" />
  <AsyncLogin @inithome="inithome" />
  <Async_message_part :flag="flag" :title="title" />
  <Async_remark_part :remarkArr="remarkArr" @ok="ok" />
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
// 登录页面
const AsyncLogin = defineAsyncComponent(() => import('./login-page.vue'))
// 滑动页面
import carousel_part from '../components/common/carousel-part.vue'
// 消息提示
const Async_message_part = defineAsyncComponent(() => import('../components/common/message-part.vue'))
// 评论组件
const Async_remark_part = defineAsyncComponent(() => import('../components/common/remark-part.vue'))
import { getHomeAPI, getHomeCarouselAPI, getHomeCommentAPI, getAPI, postRemarkAPI } from '../api/home-page'
import { useRouter } from 'vue-router'

let router = useRouter()
// 数据源
const initvideo = ref([])
// 转为数组或对象的数据源
const allArr = ref([])
const remarkArr = ref([])
const flag = ref(false)
const title = ref('')
const isdl = ref(false)
inithome()
// 获取视频
async function inithome() {
  let res = await getAPI()
  // console.log(res);
  if (res.status === 200) {
    // 数据
    let data = res.data.data
    localStorage.setItem('data', JSON.stringify(data))
    isdl.value = true
    Timeout('登录成功')
  } else {
    Timeout('登录失败')
    login()
    return
  }
  let result = await getHomeAPI()
  const code = result.data.code
  if (code === 200) {
    initvideo.value = result.data.data
    initvideo.value.forEach((item) => {
      if (JSON.parse(item).Video) {
        allArr.value.push(JSON.parse(item))
        allArr.value.forEach((item1) => {
          item1.loveFlag = false
          item1.flagHover = false
        })
      }
    });
  }
  // console.log(result.data.data, allArr.value);
}

// 搜索
function ss() {
  if (isdl.value) {
    router.push('/video')
  } else {
    login()
  }
}

// 登录页面弹出
function login() {
  document.querySelector('.login').style.transform = 'translateY(0)';
}

// 头像
function sculpture(userId) {
  if (isdl.value) {
    console.log(userId.userId);
    // const id = JSON.stringify(userId.userId)
    const id = userId.userId
    console.log(id);
    router.push({ name: 'profile', query: { id } })
  } else {
    login()
  }
}

// Message组件简便方法
function Timeout(t) {
  flag.value = true
  title.value = t
  setTimeout(() => {
    flag.value = false
    title.value = ''
  }, 2000)
}

// 爱心
async function love(val) {
  if (isdl.value) {
    let result = await getHomeCarouselAPI(val.userId, val.videoId)
    console.log(result);
    if (result.data.code === 200) {
      allArr.value.map((item) => {
        // 寻找和当前点击项相同的那一项的item
        if (item.Video.userId === val.userId) {
          // 加上loveFlag控制爱心高亮
          //加上flagHover控制爱心动画放大缩小
          item.loveFlag = !item.loveFlag
          item.flagHover = !item.flagHover
          if (item.loveFlag) {
            item.WSLCNum.likeNum++
            Timeout('喜欢成功~')
            setTimeout(() => {
              item.flagHover = false
            }, 300)
          } else {
            item.WSLCNum.likeNum--
            Timeout('取消喜欢~')
            setTimeout(() => {
              item.flagHover = false
            }, 300)
          }
        }
      })
    }
  } else {
    login()
  }
}

// 信息
async function message(val) {
  console.log(1234);
  if (isdl.value) {
    let result = await getHomeCommentAPI(val.videoId)
    if (result.data.code === 200) {
      remarkArr.value = result.data.data
      remarkArr.value.forEach((item) => {
        // 给每一项加上loveFlag控制爱心高亮
        // 给每一项加上flagHover控制爱心动画放大缩小
        item.loveFlag = false
        item.flagHover = false
      })
      console.log(remarkArr.value, '全部信息');
      document.querySelector('.remark-box').style.transform = 'translateY(0)';
      Timeout('评论获取成功~')
    } else {
      Timeout('评论获取失败~')
    }
  } else {
    login()
  }
}

// 点击按钮添加自己的评论
async function ok(params) {
  console.log(params);
  let userId = JSON.parse(localStorage.getItem('data')).userId
  let result = await postRemarkAPI({
    'content': params.inputValue,
    // 回复评论的id
    'replyId': params.commentIdval || '',
    // 谁发布的id
    'fromUserId': userId,
    'toVideoId': params.videoId
  })
  if (result.data.code === 200) {
    Timeout('评论成功！')
    let res = await getHomeCommentAPI(params.videoId)
    if (res.data.code === 200) {
      remarkArr.value = res.data.data
    }
  } else {
    Timeout('评论失败！')
  }
}

//分享
function share() {
  if (isdl.value) {
    console.log('share');
  } else {
    login()
  }
}

</script>

<style lang="scss" scoped></style>